<template>
  <!-- 导航栏 -->
  <div :class="['navbar', showFilter ? 'scroll' : '']">
    <div class="win">
      <img :src="logo" alt="" class="logo" />
      <el-button @click="handleOut">out</el-button>
    </div>
  </div>
</template>

<script setup>
import { resetRouter } from '@/router/index'
import { useRouter } from 'vue-router'
import { removeLocalToken } from '@/utils/auth'
import { ref, onMounted, onBeforeMount } from 'vue'
const router = useRouter()
const showFilter = ref(false)
const logo = ref('https://cdn1-tx.jianzhikeji.com/dsh/base/20240820/e9f6e74e994268802eda08ed5f197c28.jpg')

onMounted(() => {
  window.addEventListener('scroll', handerScroll)
})
onBeforeMount(() => {
  window.removeEventListener('scroll', handerScroll)
})
// 监听是否向下滚动
const handerScroll = () => {
  if (window.pageYOffset > 0) {
    showFilter.value = true
  } else {
    showFilter.value = false
  }
}
const handleOut = () => {
  removeLocalToken()
  resetRouter()
  router.push({ path: '/login' })
}
</script>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: 64px;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  &.scroll {
    box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.05);
    backdrop-filter: saturate(180%) blur(6px);
    background: rgba(255, 255, 255, 0.85);
  }
  .win {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 1200px;
    .logo {
      width: 42px;
      height: 42px;
    }
  }
}
</style>
